<template>
  <van-row class="discounts-block-item">
    <van-col :span="8" class="left">
      <img v-if="info.img" :src="info.img"/>
      <img v-else :src="`${$baseImgUrl}company/letter_block01.jpg`"/>
    </van-col>
    <van-col :span="16" class="right">
      <div class="content">
        <h2 class="title">{{info.title}}</h2>
        <div class="description">{{info.description}}</div>
        <div class="discounts-description">
          <span class="desc link">{{info.discountsDescription}}</span>
          <span class="share-wrap link">
            <i class="huobo huobo-share"></i>{{info.shareCounts}}
          </span>
        </div>
      </div>
    </van-col>
  </van-row>
</template>

<script>
export default {
  name: 'DiscountsBlockItem',
  props: {
    info: {
      type: Object,
      default() {
        return {
          title: '尊龙会员日 狂送不停',
          description: '海博铂金认证娱乐场【尊龙娱乐】会员日抽奖上线，豪礼现金，狂送不停！价值十万的奢侈品，100克金条等你来拿！',
          discountsDescription: '尊龙发布，尊龙更多优惠',
          shareCounts: 2
        };
      }
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .discounts-block-item {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    .left {
      img {
        width: 95%;
        padding: 5px;
      }
    }
    .right {
      padding: 0 1rem 0 1rem;
      .title {
        line-height: 4rem;
        font-weight: bold;
        font-size: 1.8rem;
        color: #333;
      }
      .description {
        max-height: 4rem;
        line-height: 2rem;
        overflow: hidden;
        color: #888;
      }
      .discounts-description {
        display: flex;
        margin-top: 1rem;
        color: #666;
        .share-wrap {
          flex: 1;
          text-align: right;
          .huobo {
            margin-right: .5rem;
            font-size: 1.4rem;
          }
        }
      }
      .share {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 10px;
        .share-btn {
          margin-right: 10px;
          padding: 10px 20px;
          border-radius: 3px;
          background-color: @mainBgColor;
          color: #fff;
          cursor: pointer;
          &:hover {
            background-color: @mainBgHoverColor;
          }
        }
        .share-count {
          font-size: 16px;
        }
      }
    }
  }
</style>
